<?php
use Application\Model\vn3dUtil;
$this->headtitle($groupProduct->name);
?>
<script>
var orderby="<?php echo $order_by;?>";
var order="<?php echo $order;?>";
var rowperpage=<?php echo $rowPerPage;?>;
var typeView="<?php echo $typeView;?>";
var currentUrl=location.href;
function loadProducts(){
	$("#content-product").prepend("<center><img src='/img/ajax-loader.gif' /></center>");
	$.ajax({
        url: currentUrl,
        type: "POST",
        dataType:"html",
        data: {
               order_by:orderby,
               order:order,
        	   rowperpage:rowperpage,
        	   typeView:typeView
        	}, //The data your sending to page
        success: function(html){
        $("#content-product").html(html);
//         location.href=currentUrl+"#breadcrumb";

        },
        error:function(){
            console.log("AJAX request was a failure");
        }
      });
}
$(document).ready(function(){

$("#vn3d-product-sort").change(function(){
 ord=$("select#vn3d-product-sort option:selected").val();
// 	console.log(orderby)
 if(ord=="price asc"){

	  orderby="price";
	  order="asc";
 }else if (ord=="date_created desc") {

	  orderby="date_created";
	  order="desc";

}else if (ord=="price desc") {

	  orderby="price";
	  order="desc";
}else if (ord=="view") {

	  orderby="total_view";
	  order="desc";

}
	loadProducts();
});
$("#vn3d-product-rowperpage").change(function(){
	rowperpage=$("select#vn3d-product-rowperpage option:selected").val();
// 	console.log(rowperpage);
	loadProducts();
});

$("#vn3d-products-grid").click(function(){
	typeView="GRID";
	loadProducts();

});
$("#vn3d-products-list").click(function(){
	typeView="LIST";
	loadProducts();

});
$("#vn3d-products-table").click(function(){
	typeView="TABLE";
	loadProducts();

});
$("#vn3d-products-panel").click(function(){
	typeView="PANEL";
	loadProducts();

});
$(document).on("click","ul.pagination li a",function(event){
	event.preventDefault();
	currentUrl=$(this).attr("url");
	loadProducts();



});


});
</script>
<style>

#content-product {
	margin-top: 15px;
}
</style>

<?php if(!empty($q)){?>
<div class="col-md-12">
<?php echo $this->partial("application/store/search-result.phtml");?>

</div>
<?php }else{?>
<ol id="breadcrumb" class="breadcrumb">
	<li><a href="/store">Home</a></li>
	<li class="active"><a><?php echo $groupProduct->name;?></a></li>
</ol>
<?php }?>
<div>
	<hr>
	<?php if(empty($q)){?>
	<h2><?php echo $groupProduct->name;?></h2>
	<?php }?>
	<select id="vn3d-product-sort">
		<option value="price asc" selected="selected">Sort by Price: Low to High</option>
		<option value="date_created desc">Sort By Newest Items</option>
		<option value="price desc">Sort by Price: High to Low</option>
		<option value="view">Sort by Popularity</option>
	</select> <select id="vn3d-product-rowperpage">
		<option value="12" selected="selected">12 Per Page</option>
		<option value="48">48 Per Page</option>
	</select>
	<div class="btn-group pull-right">
		<button id="vn3d-products-grid" type="button" class="btn btn-default">
			<span class="glyphicon glyphicon-th"></span>
		</button>
		<button id="vn3d-products-list" type="button" class="btn btn-default">
			<span class="glyphicon glyphicon-th-list"></span>
		</button>
		<button id="vn3d-products-table" type="button" class="btn btn-default">
			<span class="glyphicon glyphicon-list-alt"></span>
		</button>
		<button id="vn3d-products-panel" type="button" class="btn btn-default">
			<span class="glyphicon glyphicon-list"></span>
		</button>
	</div>
</div>
<div id="content-product">
<?php
if ($typeView == "GRID") {
    echo $this->partial("application/store/products-grid.phtml");
} elseif ($typeView = "LIST") {
    echo $this->partial("application/store/products-list.phtml");
} elseif ($typeView == "PANEL") {
    echo $this->partial("application/store/products-panel.phtml");
} elseif ($typeView == "TABLE") {
    echo $this->partial("application/store/products-table.phtml");
}
?>

</div>
